import React, { useEffect } from 'react'
import './style.less'
import classNames from 'classnames'

const Overview: React.FC = () => {
  const serverList = [
    { label: '产业数观', path: `https://cysg.hsmap.com`, icon: '/static/img/portal/产业数观.png' },
    { label: '金融服务端', path: 'https://clsj.hsmap.com', icon: '/static/img/portal/金融服务端置activ.png' },
    { label: '企业服务端', disabled: true, icon: '/static/img/portal/企业服务端.png' },
    { label: '产业数据服务运营中心', path: `${import.meta.env.VITE_DATA_SG_URL}/operate`, icon: '/static/img/portal/产业数观.png' }
  ]
  const assetsServiceList = [
    { label: '产业数据资产超市', path: import.meta.env.VITE_DATA_SHOP_URL, icon: '/static/img/portal/产业数据资产超市.png' },
    { label: '数据交易服务系统', path: 'http://192.168.201.57:13012/#/homePage', icon: '/static/img/portal/数据工厂.png' },
    { label: '隐私计算', path: `http://192.168.110.40:13014/#/login`, icon: '/static/img/portal/隐私计算.png' }
  ]
  const qualityInspectList = [{ label: '产业数据质检系统', path: 'https://web-data-qa.hsmap.com', icon: '/static/img/portal/产业数据质检系统.png' }]
  const buildFactoryList = [
    { label: '数据编辑工具', path: import.meta.env.VITE_DATA_EDIT_TOOL_URL, icon: '/static/img/portal/数据编辑工具.png' },
    { label: '标签工厂', path: `https://pivot.hsmap.com/tag`, icon: '/static/img/portal/标签工厂.png' },
    { label: '图谱工厂', path: `https://pivot.hsmap.com/map`, icon: '/static/img/portal/图谱工厂.png' },
    { label: '指标工厂', path: `https://ic-index.hsmap.com`, icon: '/static/img/portal/指标工厂.png' },
    { label: '模型工厂', path: `https://pivot.hsmap.com/industry`, icon: '/static/img/portal/模型工厂.png' }
  ]
  const infrastructureList = [
    { label: '日志告警中心', disabled: true, icon: '/static/img/portal/日志告警中心-disabled.png' },
    { label: '审批中心', disabled: true, icon: '/static/img/portal/审批中心.png' },
    { label: '调度中心', path: `http://192.168.201.83:12345/dolphinscheduler/ui/login`, icon: '/static/img/portal/调度中心.png' },
    { label: '集成中心', path: `https://web-data-integration.hsmap.com/`, icon: '/static/img/portal/集成中心.png' },
    { label: '运维中心', disabled: true, icon: '/static/img/portal/运维中心.png' },
    { label: '作业开发平台', path: `http://192.168.201.81:8088/ui2/#/cluster-overview`, icon: '/static/img/portal/作业开发平台.png' },
    {
      label: '分布式对象存储系统',
      path: `http://192.168.201.81:50070/dfshealth.html#tab-overview`,
      icon: '/static/img/portal/分布式对象存储系统.png'
    },
    { label: '数据质量', disabled: true, icon: '/static/img/portal/数据重量.png' },
    { label: '数据血缘', disabled: true, icon: '/static/img/portal/数据血缘.png' }
  ]

  const toSystem = (item: { label: string; path: any; disabled?: undefined } | { label: string; disabled: boolean; path?: undefined }) => {
    if (item.disabled) {
      return
    }
    window.open(`${item.path}`, '_blank')
  }

  useEffect(() => {
    document.title = '门户'
  }, [])

  return (
    <div className="portal-page-wrapper">
      <header>
        <div className="flex items-center">
          <img src="/static/img/portal/logo.png" alt="" />
        </div>
      </header>
      <div className="main-content">
        <div
          className="left-box"
          onClick={() => {
            window.open(`${import.meta.env.VITE_DATA_BOARD_URL}`, '_blank')
          }}>
          产业数据资产看板
        </div>
        <div className="center-box">
          <div className="title">服务端产品</div>
          <div className="common-row server-side">
            {serverList.map((item) => (
              <div key={item.label} onClick={() => toSystem(item)} className={classNames({ disabled: item.disabled })}>
                <img src={item.icon} alt="" />
                <span>{item.label}</span>
              </div>
            ))}
          </div>
          <div className="title title2">资产服务产品</div>
          <div className="common-row assets-service">
            {assetsServiceList.map((item) => (
              <div key={item.label} onClick={() => toSystem(item)} className={classNames({ disabled: item.disabled })}>
                <img src={item.icon} alt="" />
                <span>{item.label}</span>
              </div>
            ))}
          </div>
          <div className="title title3">产业数据质检系统</div>
          <div className="common-row quality-inspect">
            {qualityInspectList.map((item) => (
              <div key={item.label} onClick={() => toSystem(item)} className={classNames({ disabled: item.disabled })}>
                <img src={item.icon} alt="" />
                <span>{item.label}</span>
              </div>
            ))}
          </div>
          <div className="title title4">资产建设工厂</div>
          <div className="common-row build-factory">
            {buildFactoryList.map((item) => (
              <div key={item.label} onClick={() => toSystem(item)} className={classNames({ disabled: item.disabled })}>
                <img src={item.icon} alt="" />
                <span>{item.label}</span>
              </div>
            ))}
          </div>
          <div className="title title5">基础设施</div>
          <div className="common-row build-factory">
            {infrastructureList.map((item) => (
              <div key={item.label} onClick={() => toSystem(item)} className={classNames({ disabled: item.disabled })}>
                <img src={item.icon} alt="" />
                <span>{item.label}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="right-box1">
          <div
            className="top"
            onClick={() => {
              window.open(`${import.meta.env.VITE_DATA_SHOP_URL}/dataService`, '_blank')
            }}>
            <img src="/static/img/portal/需求订单.png" alt="" />
            <p>需求订单</p>
          </div>
          <div
            className="footer"
            onClick={() => {
              window.open(`${import.meta.env.VITE_DATA_ORDER_URL}`, '_blank')
            }}>
            <img src="/static/img/portal/生产订单.png" alt="" />
            <p>生产订单</p>
          </div>
        </div>
        <div
          className="right-box2"
          onClick={() => {
            window.open(`http://192.168.201.82:6080`, '_blank')
          }}>
          数据安全系统
        </div>
      </div>
      <div
        className="backIndex"
        onClick={() => {
          window.open(`${import.meta.env.VITE_APP_DEMO_PORTAL_URL}/#/APP?url=https://szdz-demo.hsbrain.com/dataFactory`, '_self')
        }}></div>
    </div>
  )
}

export default Overview
